<template>
  <div class="travelApplicationDetails">
    <div class="title">{{ $t("travelManagement.travelApplicationDetails.title") }}</div>

    <div style="overflow: auto; margin: 0px 20px;position: relative;">
      <div class="yt-btn yt-btn-ys" style="position: absolute;top: 10px;right:86px;" @click="exportApplyTravel()"> {{ $t("travelManagement.travelApplicationDetails.export") }}</div>
      <div class="yt-btn yt-btn" style="position: absolute;top: 10px;right:0;" @click="getBack"> {{ $t("travelManagement.travelApplicationDetails.getBack") }}</div>
      <div class="yt-box-flex-one">
        <div class="flex-grid">
          <div class="flex-col colspan-1-10 flex-bg">{{ $t("travelManagement.travelApplicationDetails.basicData") }}</div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.applyUserId") }}</div>
          <div class="flex-col bgeee">{{userList.applyUserId}}</div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.userName") }}</div>
          <div class="flex-col bgeee">{{userList.userName}}</div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.department") }}</div>
          <div class="flex-col bgeee" :title="userList.department">{{userList.department}}</div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.applyUserTitle") }}</div>
          <div class="flex-col bgeee pd">
            <el-input :disabled="show === '1' || ratify === 'ratify'" v-model="fromData.applyProjectTravelling.applyUserTitle" :placeholder="$t('placeholder.content')" :clearable="show !== '1' && !ratify" class="filter-item"></el-input>
          </div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.fillingDate") }}</div>
          <div class="flex-col bgeee">{{formatter.formatTimes('', '', new Date())}}</div>
          <div class="flex-col flex-bg"><span style="color:red;padding-right: 5px;">*</span>{{ $t("travelManagement.travelApplicationDetails.employUserId") }}</div>
          <div class="flex-col pd">
            <popover-select selectType="user" @input="setSignersignatory" v-model="userCostList.employUserId" :disabled="show === '1' || ratify === 'ratify'" :placeholder="$t('travelManagement.travelApplicationDetails.tips.employUserId')"></popover-select>
          </div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.userName") }}</div>
          <div class="flex-col bgeee" :title="userCostList.userName">{{userCostList.userName}}</div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.department") }}</div>
          <div class="flex-col bgeee" :title="userCostList.department">{{userCostList.department}}</div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.applyUserTitle") }}</div>
          <div class="flex-col bgeee pd">
            <el-input :disabled="show === '1' || ratify === 'ratify'" v-model="fromData.applyProjectTravelling.employUserTitle" :placeholder="$t('placeholder.content')" :clearable="show !== '1' && !ratify" class="filter-item"></el-input>
          </div>
          <div class="flex-col flex-bg colspan-9-2"></div>
          <div class="flex-col colspan-1-10 flex-bg">{{ $t("travelManagement.travelApplicationDetails.applicationItem")}}</div>
          <div class="flex-col flex-bg"><span style="color:red;padding-right: 5px;">*</span>{{ $t("travelManagement.travelApplicationDetails.projectNo") }}</div>
          <div class="flex-col pd">
            <popover-select selectType="project" @input="select" v-model="fromData.applyProjectTravelling.projectNo" :disabled="show === '1' || ratify === 'ratify'" :placeholder="$t('placeholder.searchKeywords')"></popover-select>
          </div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.projectName") }}</div>
          <div class="flex-col colspan-4-3 bgeee">
            {{fromData.applyProjectTravelling.projectName}}
          </div>
          <div class="flex-col flex-bg"><span style="color:red;padding-right: 5px;">*</span>{{ $t("travelManagement.travelApplicationDetails.country") }}</div>
          <div class="flex-col pd" style="grid-column: span 3">
            <dict-select v-model="fromData.applyProjectTravelling.country" @change="setCountry" :disabled="show === '1' || ratify === 'ratify'" code="travelCountry"></dict-select>
          </div>
          <div class="flex-col colspan-1-10 flex-bg">{{
            $t("travelManagement.travelApplicationDetails.applicationDetails") }}
          </div>
        </div>
      </div>
    </div>
    <div style="overflow: auto;margin: 0px 20px;">
      <div class="yt-box-flex">
        <div class="flex-grid">
          <!--操作-->
          <div class="flex-col flex-bg coldiv-1-2">{{ $t("travelManagement.travelApplicationDetails.operate") }}</div>
          <!--项次-->
          <div class="flex-col flex-bg coldiv-1-2">{{ $t("travelManagement.travelApplicationDetails.item") }}</div>
          <!--出差日期-->
          <div class="flex-col flex-bg colspan-3-2">{{ $t("travelManagement.travelApplicationDetails.travelDate") }}</div>
          <!--地点-->
          <div class="flex-col flex-bg colspan-5-2">{{ $t("travelManagement.travelApplicationDetails.place") }}</div>
          <!--洽公对象-->
          <div class="flex-col flex-bg colspan-7-1 coldiv-1-2">
            <div class="yt-table-text" style="padding-top: 5px; width: 88px;">{{ $t("travelManagement.travelApplicationDetails.meeting") }}</div>
          </div>
          <!--工作记要（达成情况）-->
          <div class="flex-col flex-bg colspan-8-1 coldiv-1-2">
            <div class="yt-table-text" style="padding-top: 5px; width: 158px;">{{ $t("travelManagement.travelApplicationDetails.workMark") }}</div>
          </div>
          <div class="flex-col flex-bg colspan-9-1 coldiv-1-2">
            <div class="yt-table-text" style="padding-top: 5px; width: 88px;">{{ $t("travelManagement.travelApplicationDetails.passportCost") }}</div>
          </div>
          <div class="flex-col flex-bg colspan-10-2"> {{ $t("travelManagement.travelApplicationDetails.massTransit") }}</div>
          <div class="flex-col flex-bg colspan-12-4"> {{ $t("travelManagement.travelApplicationDetails.automobile") }}</div>
          <div class="flex-col flex-bg colspan-16-1 coldiv-1-2">
            <div class="yt-table-text" style="padding-top: 5px; width: 88px;">
              {{ $t("travelManagement.travelApplicationDetails.accommodationCost") }}
            </div>
          </div>
          <!-- <div class="flex-col flex-bg colspan-17-1 coldiv-1-2">
            <div class="yt-table-text" style="padding-top: 5px; width: 88px;">
              {{ $t("travelManagement.travelApplicationDetails.dailyCost") }}
            </div>
          </div> -->
          <el-tooltip class="item" effect="dark"  placement="top-start">
            <div slot="content">{{ $t("travelManagement.travelApplicationDetails.dailyCostTips1") }}<br/>{{ $t("travelManagement.travelApplicationDetails.dailyCostTips2") }}</div>
            <div class="flex-col flex-bg colspan-17-2">{{ $t("travelManagement.travelApplicationDetails.dailyCost") }}<i class="el-icon-question" style="margin-left:3px;"></i></div>
          </el-tooltip>
          <div class="flex-col flex-bg colspan-19-1 coldiv-1-2">
            <div class="yt-table-text" style="padding-top: 5px; width: 88px;">
              {{ $t("travelManagement.travelApplicationDetails.otherCost") }}
            </div>
          </div>
          <div class="flex-col flex-bg colspan-20-1 coldiv-1-2">
            <div class="yt-table-text" style="padding-top: 5px; width: 88px;">
              {{ $t("travelManagement.travelApplicationDetails.employUserName") }}
            </div>
          </div>
          <!--费用使用人姓名-->
          <div class="flex-col flex-bg colspan-21-1 coldiv-1-2">
            <div class="yt-table-text" style="padding-top: 5px; width: 88px;">{{ $t("travelManagement.travelApplicationDetails.employName") }}</div>
          </div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.startTime") }}</div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.endTime") }}</div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.startingPoint") }}</div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.terminalPoint") }}</div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.vehiclesCode") }}</div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.vehiclesCost") }}</div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.mileageNum") }}</div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.oilCost") }}</div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.highwayCost") }}</div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.parkingCost") }}</div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.type") }}</div>
          <div class="flex-col flex-bg">{{ $t("travelManagement.travelApplicationDetails.money") }}</div>
        </div>
        <!--编辑数据列表-->
        <div class="flex-grid" v-for="(item, index) in costList" :key="index">
          <div class="flex-col flex-bg">
            <el-button style="width: 50%;padding: 5px 5px" size="mini" type="danger" :disabled="show === '1' || ratify === 'ratify'" @click="dele(item,index)">{{ $t('button.delete') }}</el-button>
            <el-button style="width: 50%;padding: 5px 5px;margin-left:5px;" size="mini" type="success" :disabled="show === '1' || ratify === 'ratify'" @click="adds(item,index)">{{ $t("travelManagement.travelApplicationDetails.button.copy") }}</el-button>
          </div>
          <!--日期-->
          <div class="flex-col flex-bg">{{index + 1}}</div>
          <div class="flex-col pd">
            <el-date-picker style="width: 100%;padding:0px" :disabled="show === '1' || ratify === 'ratify' || !userCostList.employUserId" :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.choose')" v-model="item.startTime" class="dateTime" type="date" @change="startTimeChange(item)" :value-format="format" :format="format"/>
          </div>
          <div class="flex-col pd">
            <el-date-picker style="width: 100%;padding:0px" :disabled="show === '1' || ratify === 'ratify' || !userCostList.employUserId" :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.choose')" v-model="item.endTime" class="dateTime" type="date" @change="startTimeChange(item)" :value-format="format" :format="format"/>
          </div>
          <div class="flex-col pd">
            <el-input type="textarea" autosize :disabled="show === '1' || ratify === 'ratify'" :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')" v-model="item.startingPoint" :clearable="show !== '1' && !ratify" class="filter-item"></el-input>
          </div>
          <div class="flex-col pd">
            <el-input type="textarea" autosize :disabled="show === '1' || ratify === 'ratify'" :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')" v-model="item.terminalPoint" :clearable="show !== '1' && !ratify" class="filter-item"></el-input>
          </div>
          <div class="flex-col pd">
            <el-input :disabled="show === '1' || ratify === 'ratify'" :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')" v-model="item.meeting" :clearable="show !== '1' && !ratify" class="filter-item"></el-input>
          </div>
          <div class="flex-col pd">
            <el-input type="textarea" autosize :disabled="show === '1' || ratify === 'ratify'" :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')" v-model="item.workMark" :clearable="show !== '1' && !ratify" class="filter-item"></el-input>
          </div>
          <div class="flex-col pd">
            <div v-check-submit tabindex="0" style="width: 100%">
              <el-input :disabled="show === '1' || ratify === 'ratify'" :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')" style="display: none" type="number" size="small" v-model="item.passportCost"></el-input>
              <div class="text box" :class="{ 'cursor' : show === '1' || ratify === 'ratify' }" v-format="'#,##0'" :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')">{{ item.passportCost }}</div>
            </div>
          </div>

          <div class="flex-col pd">
            <el-select :disabled="show === '1' || ratify === 'ratify'" :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')" v-model="item.vehiclesCode" :clearable="show !== '1' && !ratify">
              <el-option v-for="(item, index) in vehiclesTypeData" :key="item.index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>

          <div class="flex-col pd">
            <div v-check-submit tabindex="0" style="width: 100%">
              <el-input :disabled="show === '1' || ratify === 'ratify'" :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')" style="display: none" type="number" size="small" v-model="item.vehiclesCost"></el-input>
              <div class="text box" :class="{ 'cursor' : show === '1' || ratify === 'ratify' }" v-format="'#,##0'" :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')">{{ item.vehiclesCost }}</div>
            </div>
          </div>

          <div class="flex-col pd">
            <div v-check-submit tabindex="0" style="width: 100%">
              <el-input
                :disabled="show === '1' || ratify === 'ratify'"
                :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')"
                style="display: none"
                type="number"
                size="small"
                v-model="item.mileageNum"
              ></el-input>
              <div class="text box" :class="{ 'cursor' : show === '1' || ratify === 'ratify' }" v-format="'0.0'" :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')">{{ item.mileageNum }}</div>
            </div>
          </div>
          <div class="flex-col pd">
            <div class="text" v-format="'#,##0'">{{ item.oilCost }}</div>
          </div>
          <div class="flex-col pd">
            <div v-check-submit tabindex="0" style="width: 100%">
              <el-input
                :disabled="show === '1' || ratify === 'ratify'"
                :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')"
                style="display: none"
                type="number"
                size="small"
                v-model="item.highwayCost"
              ></el-input>
              <div class="text box" :class="{ 'cursor' : show === '1' || ratify === 'ratify' }" v-format="'#,##0'" :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')">{{ item.highwayCost }}</div>
            </div>
          </div>
          <div class="flex-col pd">
            <div v-check-submit tabindex="0" style="width: 100%">
              <el-input
                :disabled="show === '1' || ratify === 'ratify'"
                :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')"
                style="display: none"
                type="number"
                size="small"
                v-model="item.parkingCost"
              ></el-input>
              <div class="text box" :class="{ 'cursor' : show === '1' || ratify === 'ratify' }" v-format="'#,##0'" :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')">{{ item.parkingCost }}</div>
            </div>
          </div>
          <div class="flex-col pd">
            <div v-check-submit tabindex="0" style="width: 100%">
              <el-input
                :disabled="show === '1' || ratify === 'ratify'"
                :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')"
                style="display: none"
                type="number"
                size="small"
                v-model="item.accommodationCost"
              ></el-input>
              <div class="text box" :class="{ 'cursor' : show === '1' || ratify === 'ratify' }" v-format="'#,##0'" :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')">{{ item.accommodationCost }}</div>
            </div>
          </div>

         <div class="flex-col pd" id="example2">
            <el-select :disabled="show === '1' || ratify === 'ratify'" :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')" v-model="item.dailyCostType" :clearable="show !== '1' && !ratify">
              <el-option v-for="(item, index) in perDiemType" :key="item.index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>

          <div class="flex-col pd">
            <div class="text" v-format="'#,##0'">{{ item.dailyCost }}</div>
            <!-- <div v-check-submit tabindex="0" style="width: 100%">
              <el-input
                :disabled="show === '1' || ratify === 'ratify'"
                :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')"
                style="display: none"
                type="number"
                size="small"
                v-model="item.dailyCost"
              ></el-input>
              <div class="text box" :class="{ 'cursor' : show === '1' || ratify === 'ratify' }" v-format="'#,##0'" :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')">{{ item.dailyCost }}</div>
            </div> -->
          </div>

          <!-- <div class="flex-col pd">
            <div v-check-submit tabindex="0" style="width: 100%">
              <el-input
                :disabled="show === '1' || ratify === 'ratify'"
                :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')"
                style="display: none"
                type="number"
                size="small"
                v-model="item.dailyCost"
              ></el-input>
              <div class="text box" :class="{ 'cursor' : show === '1' || ratify === 'ratify' }" v-format="'#,##0'" :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')">{{ item.dailyCost }}</div>
            </div>
          </div> -->

          <div class="flex-col pd">
            <div v-check-submit tabindex="0" style="width: 100%">
              <el-input
                :disabled="show === '1' || ratify === 'ratify'"
                :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')"
                style="display: none"
                type="number"
                size="small"
                v-model="item.otherCost"
              ></el-input>
              <div class="text box" :class="{ 'cursor' : show === '1' || ratify === 'ratify' }" v-format="'#,##0'" :placeholder="show === '1' || ratify === 'ratify' ? '' : $t('placeholder.content')">{{ item.otherCost }}</div>
            </div>
          </div>
          <div class="flex-col pd" id="example1">
            <popover-select selectType="user" @input="(val,item) => employUserName(item,index)" v-model="item.employUserName" :disabled="show === '1' || ratify === 'ratify'" :placeholder="$t('travelManagement.travelApplicationDetails.tips.employUserId')"></popover-select>
          </div>
          <div class="flex-col" style="border-right: 1px solid #d9d9d9">
            {{ item.employName }}
          </div>
        </div>
      </div>
      <div class="yt-box-flex">
        <div class="flex-grid">
          <div class="flex-col flex-bg colspan-1-8">{{ $t("travelManagement.travelApplicationDetails.subtotal") }}</div>
          <div class="flex-col center" v-format="'#,##0'">{{sumList.passportCost}}</div>
          <div class="flex-col yt-diagonal"></div>
          <div class="flex-col center" v-format="'#,##0'">{{sumList.vehiclesCost}}</div>
          <div class="flex-col yt-diagonal"></div>
          <div class="flex-col center" v-format="'#,##0'">{{sumList.oilCost}}</div>
          <div class="flex-col center" v-format="'#,##0'">{{sumList.highwayCost}}</div>
          <div class="flex-col center" v-format="'#,##0'">{{sumList.parkingCost}}</div>
          <div class="flex-col center" v-format="'#,##0'">{{sumList.accommodationCost}}</div>
          <div class="flex-col yt-diagonal"></div>
          <div class="flex-col center" v-format="'#,##0'">{{sumList.dailyCost}}</div>
          <div class="flex-col center" v-format="'#,##0'">{{sumList.otherCost}}</div>
          <div class="flex-col yt-diagonal"></div>
          <div class="flex-col yt-diagonal" style="border-right: 1px solid #d9d9d9"></div>
          <div class="flex-col flex-bg colspan-1-8">{{ $t("travelManagement.travelApplicationDetails.calculationTotal")}}</div>
          <div class="flex-col colspan-9-13" v-format="'#,##0'" style="border-right: 1px solid #d9d9d9;font-size: 14px;text-align: center">{{calculationTotal}}</div>
          <div class="flex-col flex-bg colspan-1-8">
            <div class="yt-table-text" style="text-align: left;width: 98%;">{{ $t("travelManagement.travelApplicationDetails.noteOne") }}</div>
          </div>
          <div class="flex-col colspan-9-13" style="border-right: 1px solid #d9d9d9"></div>
          <div class="flex-col flex-bg colspan-1-8">
            <div class="yt-table-text" style="text-align: left;width: 98%;">{{ $t("travelManagement.travelApplicationDetails.noteTwo") }}</div>
          </div>
          <div class="flex-col" style="display: flex;justify-content: center;align-items: center"> {{ $t("travelManagement.travelApplicationDetails.applicant") }}</div>
          <div class="flex-col colspan-10-12" style="display: flex;justify-content: center;align-items: center;border-right: 1px solid #d9d9d9">{{userList.userName}}</div>
        </div>
      </div>
    </div>
    <!--<div class="w20" style="margin-left: 20px;width: 50%">
      <div class="labelName">{{$t('specialApplication.applyMaterials')}}</div>&lt;!&ndash;申请资料&ndash;&gt;
      <div>
        <el-upload
          :disabled="addQuotationDialog"
          class="upload-demo"
          ref="upload"
          accept=".xls,.xlsx"
          :action="urlUpload"
          :file-list="fromData.fileList"
          :on-success="(response,file)=>handleUpload(response)"
          :on-remove="(res)=>removeFile(res)"
          :on-preview="handlePreview"
          :before-upload="beforeAvatarUpload"
          :auto-upload="true"
        >
          <el-button size="small" type="primary" :style="{ display: visibleButton }">{{$t('specialApplication.upload')}}EXCEL</el-button>
        </el-upload>
      </div>
    </div>-->
    <div class="yt-data-btn bt30" v-if="show !== '1' && !ratify">
      <div class="yt-btn yt-btn-ys" @click="add()">{{ $t("travelManagement.travelApplicationDetails.button.add") }}</div>
      <div class="yt-btn yt-ml8 yt-btn-ys" @click="apply()">{{ $t("travelManagement.travelApplicationDetails.button.apply") }}</div>
      <div class="yt-btn yt-ml8" @click="save()" v-if="!this.applyId">{{ $t("travelManagement.travelApplicationDetails.button.save") }}</div>
    </div>
  </div>
</template>

<script>
  import popoverSelect from '@/components/popover-select/index.vue';
  import { queryProject } from '@/api/scheduleManager/worksDetails';
  import formatter from '@/utils/formatter';
  import YtTemplateTime from '@/components/Yt-template/templateTime.vue';
  import YtSelect from '@/components/Yt-select/index.vue';
  import store from '@/store'

  import { save, apply, selectById, selectByApplyId } from '@/api/travelManagement/travelApplication';

  export default {
    name: 'travelApplicationDetails',
    components: {
      YtSelect,
      YtTemplateTime,
      popoverSelect,
      'dict-select': () => import('@/components/Dict/dictValueSelect')
    },
    props: {
      format: {
        // 时间格式
        type: String,
        default: 'yyyy-MM-dd'
      },
      play: {
        type: String
      }
    },
    data() {
      return {
        fileLists: [],
        urlUpload: '/api/admin/excel/uploadfile',
        visibleButton: '',
        addQuotationDialog: false,
        id: '',
        checked: false,
        ratify: null,
        show: null,
        optionsProject: [],
        formatter,
        calculationTotal: 0,
        mileageBase: 0,
        vehiclesTypeData: [],
        countryMoney: 0,
        perDiemType: [],
        travelCountry: [],
        sumList: {
          passportCost: 0, // 护照费用
          vehiclesCost: 0, // 交通工具费用
          oilCost: 0, // 油资
          highwayCost: 0, // 高速公路通行费
          parkingCost: 0, // 停车费
          accommodationCost: 0, // 住宿费
          dailyCost: 0, // 日支费
          otherCost: 0 // 其他费用
        },
        userList: {
          applyUserId: '',
          userName: '',
          department: '',
          time: ''
        },
        userCostList: {
          employUserId: '',
          employUserName: '',
          userName: '',
          department: ''
        },
        fromData: {
          fileList: [], // 申请资料
          applyProjectTravelling: {
            id: '',
            applyUserId: '', // 申请人ID
            applyUserTitle: '', // 申请人职称
            employUserId: '', // 费用使用人ID
            employUserTitle: '', //  费用使用人职称
            projectId: '', // 专案ID
            projectName: '', // 专案名称
            projectNo: '', // 专案编号
            country: '' // 国别地区
          },
          detailList: []
        },
        costList: [{
          num: 0,
          startTime: '', // 开始时间
          endTime: '', // 结束时间
          startingPoint: '', // 起点
          terminalPoint: '', // 终点
          meeting: '', // 洽谈对象
          workMark: '', // 工作记要
          passportCost: '', // 护照费用
          vehiclesType: '', // 交通工具
          vehiclesCode: '', // 交通工具编码
          vehiclesCost: '', // 交通工具费用
          mileageNum: '', // 里程数
          oilCost: '', // 油资
          highwayCost: '', // 高速公路通行费
          parkingCost: '', // 停车费
          accommodationCost: '', // 住宿费
          dailyCost: '', // 日支费
          dailyCostType: '', // 日支费类别
          otherCost: '', // 其他费用
          employUserId: '', // 费用使用人员
          employUserName: '', // 费用使用人员编
          employName: '' // 费用使用人员姓名
        }, {
          num: 1,
          startTime: '', // 开始时间
          endTime: '', // 结束时间
          startingPoint: '', // 起点
          terminalPoint: '', // 终点
          meeting: '', // 洽谈对象
          workMark: '', // 工作记要
          passportCost: '', // 护照费用
          vehiclesType: '', // 交通工具
          vehiclesCode: '', // 交通工具编码
          vehiclesCost: '', // 交通工具费用
          mileageNum: '', // 里程数
          oilCost: '', // 油资
          highwayCost: '', // 高速公路通行费
          parkingCost: '', // 停车费
          accommodationCost: '', // 住宿费
          dailyCost: '', // 日支费
          dailyCostType: '', // 日支费类别
          otherCost: '', // 其他费用
          employUserId: '', // 费用使用人员
          employUserName: '', // 费用使用人员编
          employName: '' // 费用使用人员姓名
        }, {
          num: 2,
          startTime: '', // 开始时间
          endTime: '', // 结束时间
          startingPoint: '', // 起点
          terminalPoint: '', // 终点
          meeting: '', // 洽谈对象
          workMark: '', // 工作记要
          passportCost: '', // 护照费用
          vehiclesType: '', // 交通工具
          vehiclesCode: '', // 交通工具编码
          vehiclesCost: '', // 交通工具费用
          mileageNum: '', // 里程数
          oilCost: '', // 油资
          highwayCost: '', // 高速公路通行费
          parkingCost: '', // 停车费
          accommodationCost: '', // 住宿费
          dailyCost: '', // 日支费
          dailyCostType: '', // 日支费类别
          otherCost: '', // 其他费用
          employUserId: '', // 费用使用人员
          employUserName: '', // 费用使用人员编
          employName: '' // 费用使用人员姓名
        }, {
          num: 3,
          startTime: '', // 开始时间
          endTime: '', // 结束时间
          startingPoint: '', // 起点
          terminalPoint: '', // 终点
          meeting: '', // 洽谈对象
          workMark: '', // 工作记要
          passportCost: '', // 护照费用
          vehiclesType: '', // 交通工具
          vehiclesCode: '', // 交通工具编码
          vehiclesCost: '', // 交通工具费用
          mileageNum: '', // 里程数
          oilCost: '', // 油资
          highwayCost: '', // 高速公路通行费
          parkingCost: '', // 停车费
          accommodationCost: '', // 住宿费
          dailyCost: '', // 日支费
          dailyCostType: '', // 日支费类别
          otherCost: '', // 其他费用
          employUserId: '', // 费用使用人员
          employUserName: '', // 费用使用人员编
          employName: '' // 费用使用人员姓名
        }, {
          num: 4,
          startTime: '', // 开始时间
          endTime: '', // 结束时间
          startingPoint: '', // 起点
          terminalPoint: '', // 终点
          meeting: '', // 洽谈对象
          workMark: '', // 工作记要
          passportCost: '', // 护照费用
          vehiclesType: '', // 交通工具
          vehiclesCode: '', // 交通工具编码
          vehiclesCost: '', // 交通工具费用
          mileageNum: '', // 里程数
          oilCost: '', // 油资
          highwayCost: '', // 高速公路通行费
          parkingCost: '', // 停车费
          accommodationCost: '', // 住宿费
          dailyCost: '', // 日支费
          dailyCostType: '', // 日支费类别
          otherCost: '', // 其他费用
          employUserId: '', // 费用使用人员
          employUserName: '', // 费用使用人员编
          employName: '' // 费用使用人员姓名
        }, {
          num: 5,
          startTime: '', // 开始时间
          endTime: '', // 结束时间
          startingPoint: '', // 起点
          terminalPoint: '', // 终点
          meeting: '', // 洽谈对象
          workMark: '', // 工作记要
          passportCost: '', // 护照费用
          vehiclesType: '', // 交通工具
          vehiclesCode: '', // 交通工具编码
          vehiclesCost: '', // 交通工具费用
          mileageNum: '', // 里程数
          oilCost: '', // 油资
          highwayCost: '', // 高速公路通行费
          parkingCost: '', // 停车费
          accommodationCost: '', // 住宿费
          dailyCost: '', // 日支费
          dailyCostType: '', // 日支费类别
          otherCost: '', // 其他费用
          employUserId: '', // 费用使用人员
          employUserName: '', // 费用使用人员编
          employName: '' // 费用使用人员姓名
        }, {
          num: 6,
          startTime: '', // 开始时间
          endTime: '', // 结束时间
          startingPoint: '', // 起点
          terminalPoint: '', // 终点
          meeting: '', // 洽谈对象
          workMark: '', // 工作记要
          passportCost: '', // 护照费用
          vehiclesType: '', // 交通工具
          vehiclesCode: '', // 交通工具编码
          vehiclesCost: '', // 交通工具费用
          mileageNum: '', // 里程数
          oilCost: '', // 油资
          highwayCost: '', // 高速公路通行费
          parkingCost: '', // 停车费
          accommodationCost: '', // 住宿费
          dailyCost: '', // 日支费
          dailyCostType: '', // 日支费类别
          otherCost: '', // 其他费用
          employUserId: '', // 费用使用人员
          employUserName: '', // 费用使用人员编
          employName: '' // 费用使用人员姓名
        }, {
          num: 7,
          startTime: '', // 开始时间
          endTime: '', // 结束时间
          startingPoint: '', // 起点
          terminalPoint: '', // 终点
          meeting: '', // 洽谈对象
          workMark: '', // 工作记要
          passportCost: '', // 护照费用
          vehiclesType: '', // 交通工具
          vehiclesCode: '', // 交通工具编码
          vehiclesCost: '', // 交通工具费用
          mileageNum: '', // 里程数
          oilCost: '', // 油资
          highwayCost: '', // 高速公路通行费
          parkingCost: '', // 停车费
          accommodationCost: '', // 住宿费
          dailyCost: '', // 日支费
          dailyCostType: '', // 日支费类别
          otherCost: '', // 其他费用
          employUserId: '', // 费用使用人员
          employUserName: '', // 费用使用人员编
          employName: '' // 费用使用人员姓名
        }],
        progressId: '',
        applyId: ''
      };
    },
    mounted() {
      this.id = this.$route.query.id || this.$route.query.applyId || 'addTravelApplicationDetails'
      this.ratify = this.$route.query.ratify
      this.show = this.$route.query.status
      if (this.show === '1' || this.ratify === 'ratify') {
        this.addQuotationDialog = true
        this.visibleButton = 'none'
      }
      this.vehiclesTypeData = this.$store.getters.allDic.vehiclesType
      // 日支費類型
      this.perDiemType = this.$store.getters.allDic.perDiemType
      // 出差國家區域
      this.travelCountry = this.$store.getters.allDic.travelCountry

      this.mileageBase = Number(this.$store.getters.allMapDic.mileageBase[0]) // 里程数 * 5
      if (this.$route.query.id) {
        this.progressId = this.$route.query.id
      }
      if (this.$route.query.applyId) {
        this.applyId = this.$route.query.applyId
      }
      this.getData();
    },
    methods: {
      hanldFileList() {
        if (this.fromData.fileList && this.fromData.fileList.length > 0) {
          this.fromData.fileList.forEach(item => {
            if (item.uid) {
              delete item.uid
            }
            if (item.status) {
              delete item.status
            }
          })
        }
      },
      submitUpload() {
        this.$refs.upload.submit()
      },
      handlePreview(file) {
        if (file.name && file.url) {
          const a = document.createElement('a');
          const href = '/api/admin/excel/downloadfiles?fileName=' + file.name + '&fileNamePath=' + file.url;
          console.log('href', href);
          a.download = Date.now();
          a.href = href;
          a.click();
        }
      },
      removeFile(res) {
        // 删除文件
        this.fromData.fileList.forEach((item, i) => {
          if (item.name === res.name) {
            this.fromData.fileList.splice(i, 1)
          }
        })
      },
      handleUpload(res) {
        console.log(res)
        if (!this.fromData.fileList) {
          this.fromData.fileList = []
        }
        // 上传成功之前获取文件信息
        this.fromData.fileList.push({ name: res.data.fileName, url: res.data.fileNamesPath })
        console.log(this.fromData.fileList)
      },
      // 上传成功之前限制格式或大小
      beforeAvatarUpload(file) {
        const isType =
          file.type ===
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
          file.type === 'application/vnd.ms-excel';
        const isLt2M = file.size / 1024 / 1024 < 10;
        if (!isType) {
          this.$message.error(this.$t('demandQuotation.supportFileTypeThree')); // 上传文件支持excel格式文件!
        }
        if (!isLt2M) {
          this.$message.error(this.$t('demandQuotation.supportFileSize')); // 上传文件大小不能超过10MB!
        }
        return isType && isLt2M;
      },
      closeSelectedTag(view) {
        // 清除关闭页面的储存数据
        this.$store.getters.pageState[view.path] = {}
        if (view.name === 'batch-add-retrofitting-device') {
          this.$store.dispatch('delKeepAliveRoute', 'batchAddRetrofittingDevice')
        } else if (view.name === 'batch-add-zoomlion-device') {
          this.$store.dispatch('delKeepAliveRoute', 'batchAddZoomlionDevices')
        }
        this.$store.dispatch('delVisitedViews', view).then(views => {
          if (this.isActive(view)) {
            const latestView = views.slice(-1)[0]
            if (latestView) {
              this.$router.push(latestView)
            } else {
              this.$router.push('/')
            }
          }
        })
      },
      isActive(route) {
        if (
          this.$route.path.indexOf('/device/basic-data/device-') >= 0 && route.path.indexOf('/device/basic-data/device-') >= 0) {
          // 解决三级路由tagView显示问题
          return true
        }
        if (
          this.$route.path.indexOf('/contract-management/contract-list/contract-') >= 0 && route.path.indexOf('/contract-management/contract-list/contract-') >= 0) {
          // 解决三级路由tagView显示问题
          return true
        }
        return route.path === this.$route.path
      },
      // 根据时间关联人员
      startTimeChange(val) {
        if (val.startTime && val.endTime) {
          this.$set(this.costList[val.num], 'employUserId', this.fromData.applyProjectTravelling.employUserId)
          this.$set(this.costList[val.num], 'employUserName', this.userCostList.employUserName || this.userCostList.employUserIdOld)
          this.$set(this.costList[val.num], 'employName', this.userCostList.employName || this.userCostList.userName)
        }
      },
      // 汇出
      exportApplyTravel() {
        if (this.fromData.applyProjectTravelling.projectNo === '') {
          this.$message.error(this.$t('travelManagement.travelApplicationDetails.tips.projectNo'));
          return false;
        }

        if (this.fromData.applyProjectTravelling.id) {
          const a = document.createElement('a');
          const href = '/api/admin/excel/exportApplyTravel?id=' + this.fromData.applyProjectTravelling.id + '&userId=' + this.$store.getters.info.id;
          a.download = Date.now();
          a.href = href;
          a.click();
        } else {
          const list = this.$store.getters.allMapDic.vehiclesType

          this.costList.forEach((x, index) => {
            x.vehiclesType = list[x.vehiclesCode]
            x.num = index
          })
          this.fromData.detailList = this.costList
          save(this.fromData).then(res => {
            if (res.status === 200) {
              this.id = res.data
              this.fromData.applyProjectTravelling.id = res.data


              const a = document.createElement('a');
              const href = '/api/admin/excel/exportApplyTravel?id=' + this.fromData.applyProjectTravelling.id + '&userId=' + this.$store.getters.info.id;
              a.download = Date.now();
              a.href = href;
              a.click();
            } else {
              this.$message.error(res.message);
            }
          });
        }
      },
      getBack() {
        this.closeSelectedTag(this.$route)
      },
      adds(row, index) {
        // 复制对象row
        const copy = Object.assign({}, row);
        copy.num = copy.num + 1
        // 插入对象
        this.costList.splice(index + 1, 0, copy)
      },
      add() {
        this.costList.push({
          num: this.costList.length,
          startTime: '', // 开始时间
          endTime: '', // 结束时间
          startingPoint: '', // 起点
          terminalPoint: '', // 终点
          meeting: '', // 洽谈对象
          workMark: '', // 工作记要
          passportCost: '', // 护照费用
          vehiclesType: '', // 交通工具
          vehiclesCode: '', // 交通工具编码
          vehiclesCost: '', // 交通工具费用
          mileageNum: '', // 里程数
          oilCost: '', // 油资
          highwayCost: '', // 高速公路通行费
          parkingCost: '', // 停车费
          accommodationCost: '', // 住宿费
          dailyCost: '', // 日支费
          dailyCostType: '', // 日支费类别
          otherCost: '', // 其他费用
          employUserId: '', // 费用使用人员
          employUserName: '', // 费用使用人员编
          employName: '' // 费用使用人员姓名
        })
      },
      dele(row, i) {
        if (this.costList.length > 1) {
          this.costList.splice(i, 1)
        }
      },
      // 表格人员
      employUserName(item, listIndex) {
        this.fromData.applyProjectTravelling.employUserId = item.id
        for (let x = 0; x < this.costList.length; x++) {
          this.costList[listIndex].employUserId = item.id
          this.costList[listIndex].employUserName = item.username
          this.costList[listIndex].employName = item.name
        }
      },
      // 费用适用人编
      setSignersignatory(val, item) {
        this.userCostList.employUserIdOld = item.username
        this.fromData.applyProjectTravelling.employUserId = item.id
        this.userCostList.userName = item.name
        this.userCostList.employUserName = item.username
        this.userCostList.employName = item.name
        this.userCostList.department = item.erpBuName
      },
      // 专案编号
      setSales(item) {
        this.fromData.applyProjectTravelling.projectId = item.id
        this.fromData.applyProjectTravelling.projectName = item.projectName
      },
      select(val, row) {
        this.fromData.applyProjectTravelling.projectNo = row.projectNo
        this.fromData.applyProjectTravelling.projectNoOld = row.projectNo
        this.fromData.applyProjectTravelling.projectId = row.id
        this.fromData.applyProjectTravelling.projectName = row.projectName
      },
      queryList(queryString, clear) {
        if (clear) {
          this.fromData.applyProjectTravelling.projectNo = ''
          this.fromData.applyProjectTravelling.projectNoOld = ''
          this.fromData.applyProjectTravelling.projectId = ''
          this.fromData.applyProjectTravelling.projectName = ''
        }
        const obj = {
          likeQuery: queryString,
          limit: '5'
        }
        queryProject(obj).then(res => {
          this.optionsProject = res.data.rows
        });
      },
      getUserData() {
        this.userList.applyUserId = this.$store.getters.info.username
        this.fromData.applyProjectTravelling.applyUserId = this.$store.getters.info.id
        this.userList.userName = this.$store.getters.info.name
        this.userList.department = this.$store.getters.info.erpBuName
      },
      getData() {
        const str = '/travelManagement/travelApplicationDetails'
        if (this.$store.getters.pageState[str] && this.$store.getters.pageState[str][this.id]) {
          const obj = this.$store.getters.pageState[str][this.id]
          this.fromData = obj.fromData
          this.fromData.applyProjectTravelling.projectNoOld = this.fromData.applyProjectTravelling.projectNo
          this.costList = obj.costList
          this.userCostList = obj.userCostList
          this.userList = obj.userList
        } else {
          if (this.progressId) {
            selectById({ id: this.progressId }).then(res => {
              if (res.status === 200 && res.data) {
                this.fromData = res.data
                this.fromData.applyProjectTravelling.projectNoOld = this.fromData.applyProjectTravelling.projectNo
                this.costList = this.fromData.detailList
                this.userCostList.userName = res.data.employUserInfo.name
                this.userCostList.employUserId = res.data.employUserInfo.username
                this.userCostList.employUserIdOld = res.data.employUserInfo.username
                this.userCostList.department = res.data.employUserInfo.erpBuName

                this.userList.applyUserId = res.data.applyUserInfo.username
                this.fromData.applyProjectTravelling.applyUserId = res.data.applyUserInfo.id
                this.userList.userName = res.data.applyUserInfo.name
                this.userList.department = res.data.applyUserInfo.erpBuName

                let money = 0;
                if (this.fromData.applyProjectTravelling.country) {
                  for (let i = 0; i < this.travelCountry.length; i++) {
                    if (this.fromData.applyProjectTravelling.country === this.travelCountry[i].value) {
                      if (this.travelCountry[i].remark) {
                        money = Number(this.travelCountry[i].remark)
                      }
                      break
                    }
                  }
                  this.countryMoney = money
                }
              } else {
                this.$message.error(res.message);
              }
            });
          } else if (this.applyId) {
            selectByApplyId({ id: this.applyId }).then(res => {
              if (res.status === 200 && res.data) {
                this.fromData = res.data
                this.fromData.applyProjectTravelling.projectNoOld = this.fromData.applyProjectTravelling.projectNo
                this.costList = this.fromData.detailList
                this.userCostList.userName = res.data.employUserInfo.name
                this.userCostList.employUserId = res.data.employUserInfo.username
                this.userCostList.employUserIdOld = res.data.employUserInfo.username
                this.userCostList.department = res.data.employUserInfo.erpBuName

                this.userList.applyUserId = res.data.applyUserInfo.username
                this.fromData.applyProjectTravelling.applyUserId = res.data.applyUserInfo.id
                this.userList.userName = res.data.applyUserInfo.name
                this.userList.department = res.data.applyUserInfo.erpBuName

                let money = 0;
                if (this.fromData.applyProjectTravelling.country) {
                  for (let i = 0; i < this.travelCountry.length; i++) {
                    if (this.fromData.applyProjectTravelling.country === this.travelCountry[i].value) {
                      if (this.travelCountry[i].remark) {
                        money = Number(this.travelCountry[i].remark)
                      }
                      break
                    }
                  }
                  this.countryMoney = money
                }
              } else {
                this.$message.error(res.message);
              }
            });
          } else {
            this.getUserData()
          }
        }
      },
      setCountry(val) {
        let money = 0;
        if (val) {
          for (let i = 0; i < this.travelCountry.length; i++) {
            if (val === this.travelCountry[i].value) {
              if (this.travelCountry[i].remark) {
                money = Number(this.travelCountry[i].remark)
              }
              break
            }
          }
        }
        this.countryMoney = money

        // 计算日支费用
        if (this.countryMoney) {
          this.costList.forEach(x => {
            if (x.hasOwnProperty('dailyCostType')) {
            // 获得日支費比率
              let ratio = 0
              if (x.dailyCostType) {
                for (let i = 0; i < this.perDiemType.length; i++) {
                  if (x.dailyCostType === this.perDiemType[i].value) {
                    if (this.perDiemType[i].remark) {
                      ratio = Number(this.perDiemType[i].remark)
                    }
                    break
                  }
                }
              }
              // 计算日支费用
              x.dailyCost = Math.ceil(this.countryMoney * ratio) // * datedifference(startTime,endTime)
            }
          })
        }
      },
      // 两个时间相差天数 兼容firefox chrome
      datedifference(sDate1, sDate2) { // sDate1和sDate2是2006-12-18格式
        if (sDate1 && sDate2) {
          let dateSpan = 0
          let iDays = 0
          sDate1 = Date.parse(sDate1);
          sDate2 = Date.parse(sDate2);
          dateSpan = sDate2 - sDate1;
          dateSpan = Math.abs(dateSpan);
          iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
          return iDays
        } else {
          return 0
        }
      },
      // 保存草稿
      save() {
        if (!this.fromData.applyProjectTravelling.country) {
          this.$message.error(this.$t('travelManagement.travelApplicationDetails.tips.country'));
          return false;
        }
        if (this.userCostList.employUserId === '') {
          this.$message.error(this.$t('travelManagement.travelApplicationDetails.tips.employUserId'));
          return false;
        }
        if (this.userCostList.employUserId !== this.userCostList.employUserIdOld) {
          this.$message.error(this.$t('travelManagement.travelApplicationDetails.tips.correctEmployUserId'));
          return false;
        }
        if (this.fromData.applyProjectTravelling.projectNo === '') {
          this.$message.error(this.$t('travelManagement.travelApplicationDetails.tips.projectNo'));
          return false;
        }
        if (this.fromData.applyProjectTravelling.projectNo !== this.fromData.applyProjectTravelling.projectNoOld) {
          this.$message.error(this.$t('travelManagement.travelApplicationDetails.tips.correctProjectNo'));
          return false;
        }
        const list = this.$store.getters.allMapDic.vehiclesType

        this.costList.forEach((x, index) => {
          x.vehiclesType = list[x.vehiclesCode]
          x.num = index
        })
        this.fromData.detailList = this.costList
        save(this.fromData).then(res => {
          if (res.status === 200) {
            this.$message.success(this.$t('travelManagement.travelApplicationDetails.tips.preserveSuccess'));
            this.closeSelectedTag(this.$route)
            // this.$router.push({ path: '/travelManagement/travelApplication' })
          } else {
            this.$message.error(res.message);
          }
        });
      },
      apply() {
        if (!this.fromData.applyProjectTravelling.country) {
          this.$message.error(this.$t('travelManagement.travelApplicationDetails.tips.country'));
          return false;
        }
        if (this.userCostList.employUserId === '') {
          this.$message.error(this.$t('travelManagement.travelApplicationDetails.tips.employUserId'));
          return false;
        }
        if (this.userCostList.employUserId !== this.userCostList.employUserIdOld) {
          this.$message.error(this.$t('travelManagement.travelApplicationDetails.tips.correctEmployUserId'));
          return false;
        }
        if (this.fromData.applyProjectTravelling.projectNo === '') {
          this.$message.error(this.$t('travelManagement.travelApplicationDetails.tips.projectNo'));
          return false;
        }
        if (this.fromData.applyProjectTravelling.projectNo !== this.fromData.applyProjectTravelling.projectNoOld) {
          this.$message.error(this.$t('travelManagement.travelApplicationDetails.tips.correctProjectNo'));
          return false;
        }
        for (let i = 0; i < this.costList.length; i++) {
          if (this.costList[i].vehiclesCost && !this.costList[i].vehiclesCode) {
            this.$message.error(this.$t('travelManagement.travelApplicationDetails.tips.selectVehiclesOne') + (i + 1) + this.$t('travelManagement.travelApplicationDetails.tips.selectVehiclesTwo'));
            return false
          }
        }

        const list = this.$store.getters.allMapDic.vehiclesType

        this.costList.forEach((x, index) => {
          x.vehiclesType = list[x.vehiclesCode]
          x.num = index
        })
        this.fromData.detailList = this.costList
        this.hanldFileList()
        console.log('file', this.fromData.fileList)
        apply(this.fromData).then(res => {
          if (res.status === 200) {
            this.$message.success(this.$t('travelManagement.travelApplicationDetails.tips.preserveSuccess'));
            if (this.applyId) {
              this.$router.push({ path: '/demandManager/myApplication' })
            } else {
              this.closeSelectedTag(this.$route)
              // this.$router.push({ path: '/travelManagement/travelApplication' })
            }
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },
    watch: {
      costList: {
        handler(newValue) {
          this.sumList = {
            passportCost: 0, // 护照费用
            vehiclesCost: 0, // 交通工具费用
            oilCost: 0, // 油资
            highwayCost: 0, // 高速公路通行费
            parkingCost: 0, // 停车费
            accommodationCost: 0, // 住宿费
            dailyCost: 0, // 日支费
            otherCost: 0 // 其他费用
          }


          for (let i = 0; i < newValue.length; i++) {
            if (newValue[i].hasOwnProperty('mileageNum')) {
              if (newValue[i].mileageNum === '') {
                newValue[i].oilCost = ''
              } else {
                newValue[i].oilCost = Math.round(newValue[i].mileageNum * this.mileageBase)
              }
            }

            // 计算日支费
            if (newValue[i].hasOwnProperty('dailyCostType') && this.countryMoney) {
              // 获得日支費比率
              let ratio = 0
              if (newValue[i].dailyCostType) {
                for (let f = 0; f < this.perDiemType.length; f++) {
                  if (newValue[i].dailyCostType === this.perDiemType[f].value) {
                    if (this.perDiemType[f].remark) {
                      ratio = Number(this.perDiemType[f].remark)
                    }
                    break
                  }
                }
              }
              // 计算日支费用
              const cost = Math.ceil(this.countryMoney * ratio)
              if (newValue[i].hasOwnProperty('endTime') && newValue[i].hasOwnProperty('startTime') && newValue[i].startTime && newValue[i].endTime) {
                if (newValue[i].startTime !== newValue[i].endTime) {
                  newValue[i].dailyCost = Math.ceil(cost * this.datedifference(newValue[i].startTime, newValue[i].endTime))
                } else {
                  newValue[i].dailyCost = 0
                }
              }
            }

            if (newValue[i].hasOwnProperty('passportCost')) {
              if (newValue[i].passportCost === '') {
                this.sumList.passportCost += 0;
              } else {
                this.sumList.passportCost += Number(newValue[i].passportCost);
              }
            }
            if (newValue[i].hasOwnProperty('vehiclesCost')) {
              if (newValue[i].vehiclesCost === '') {
                this.sumList.vehiclesCost += 0;
              } else {
                this.sumList.vehiclesCost += Number(newValue[i].vehiclesCost);
              }
            }
            if (newValue[i].hasOwnProperty('oilCost')) {
              if (newValue[i].oilCost === '') {
                this.sumList.oilCost += 0;
              } else {
                this.sumList.oilCost += Number(newValue[i].oilCost);
              }
            }
            if (newValue[i].hasOwnProperty('highwayCost')) {
              if (newValue[i].highwayCost === '') {
                this.sumList.highwayCost += 0;
              } else {
                this.sumList.highwayCost += Number(newValue[i].highwayCost);
              }
            }
            if (newValue[i].hasOwnProperty('parkingCost')) {
              if (newValue[i].parkingCost === '') {
                this.sumList.parkingCost += 0;
              } else {
                this.sumList.parkingCost += Number(newValue[i].parkingCost);
              }
            }
            if (newValue[i].hasOwnProperty('accommodationCost')) {
              if (newValue[i].accommodationCost === '') {
                this.sumList.accommodationCost += 0;
              } else {
                this.sumList.accommodationCost += Number(newValue[i].accommodationCost);
              }
            }
            if (newValue[i].hasOwnProperty('dailyCost')) {
              if (newValue[i].dailyCost === '') {
                this.sumList.dailyCost += 0;
              } else {
                this.sumList.dailyCost += Number(newValue[i].dailyCost);
              }
            }
            if (newValue[i].hasOwnProperty('otherCost')) {
              if (newValue[i].otherCost === '') {
                this.sumList.otherCost += 0;
              } else {
                this.sumList.otherCost += Number(newValue[i].otherCost);
              }
            }
          }
          this.sumList.passportCost = Math.round(this.sumList.passportCost * 100) / 100;
          this.sumList.vehiclesCost = Math.round(this.sumList.vehiclesCost * 100) / 100;
          this.sumList.oilCost = Math.round(this.sumList.oilCost * 100) / 100;
          this.sumList.highwayCost = Math.round(this.sumList.highwayCost * 100) / 100;
          this.sumList.parkingCost = Math.round(this.sumList.parkingCost * 100) / 100;
          this.sumList.accommodationCost = Math.round(this.sumList.accommodationCost * 100) / 100;
          this.sumList.dailyCost = Math.round(this.sumList.dailyCost * 100) / 100;
          this.sumList.otherCost = Math.round(this.sumList.otherCost * 100) / 100;
          this.calculationTotal = this.sumList.passportCost + this.sumList.vehiclesCost + this.sumList.oilCost + this.sumList.highwayCost + this.sumList.parkingCost + this.sumList.accommodationCost + this.sumList.dailyCost + this.sumList.otherCost
        },
        deep: true
      }
    },
    updated() { // 页面储存
      const obj = {
        pageRouting: '/travelManagement/travelApplicationDetails',
        id: this.id,
        userList: this.userList,
        userCostList: this.userCostList,
        fromData: this.fromData,
        costList: this.costList
      }
      store.dispatch('addPageState', obj)
    }
  };
</script>
<style scoped lang="scss">
  .travelApplicationDetails {
    margin: 24px 0;
    padding: 5px 0;
    // overflow-x: auto;
    background-color: #fff;
    .flex-col {
      .text {
        padding: 10px 15px;
      }
    }
    .yt-table-text {
      margin: 0 auto;
      line-height: 20px;
      width: 180px;
      white-space: normal;
    }
    .title {
      width: 80%;
      margin: 0 auto;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      color: #212121;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #d9d9d9;
    }

    .yt-box-flex-one {
      margin: 55px 0px 0;
      // width: 96%;
      min-width: 1440px;
      .center {
        text-align: center;
      }
      .flex-grid {
        width: 100%;
        display: grid;
        grid-template-columns: 160px 210px 120px 120px 120px 120px 120px 120px 120px auto;
        grid-template-rows: auto;
        grid-auto-flow: row;
        border: 1px solid #d9d9d9;
        border-width: 1px 1px 0px 0px;
      }
      .colspan-1-8 {
        grid-column: 1 / span 8;
      }
      .colspan-1-10 {
        grid-column: 1 / span 10;
      }
      .colspan-2-2 {
        grid-column: 2 / span 1;
      }
      .colspan-2-3 {
        grid-column: 2 / span 3;
      }
      .colspan-2-7 {
        grid-column: 2 / span 7;
      }
      .colspan-3-5 {
        grid-column: 3 / span 5;
      }
      .colspan-4-2 {
        grid-column: 4 / span 2;
      }
      .colspan-4-5 {
        grid-column: 4 / span 5;
      }
      .colspan-4-3 {
        grid-column: 4 / span 3;
      }
      .colspan-4-3 {
        grid-column: 4 / span 3;
      }
      .colspan-5-2 {
        grid-column: 5 / span 2;
      }
      .colspan-7-2 {
        grid-column: 7 / span 2;
      }
      .colspan-9-2 {
        grid-column: 9 / span 2;
      }
      .coldiv-5-9 {
        grid-row-start: 5;
        grid-row-end: span 9;
      }
      .flex-col {
        padding: 12px 5px;
        border: 1px solid #d9d9d9;
        border-width: 0 0 1px 1px;
        white-space: nowrap;
        font-size: 12px;
      }
      .flex-col.pd {
        padding: 2px;
      }
      .bgeee {
        background-color: #eee;
        text-align: center;
      }
      .flex-bg {
        background-color: #f1f4f3;
        text-align: center;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .yt-diagonal {
      background: linear-gradient(
          to bottom right,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0) calc(50% - 1.5px),
          rgb(209, 209, 209) 50%,
          rgba(0, 0, 0, 0) calc(50% + 1.5px),
          rgba(0, 0, 0, 0) 100%
      )
    }
    .yt-box-flex {
      // width: 96%;
      .center {
        text-align: center;
      }
      .flex-grid {
        width: 100%;
        display: grid;
        grid-template-columns: 80px 35px 103px 103px 80px 80px 80px 150px 65px 90px 65px 80px 50px 90px 65px 65px 100px 65px 65px 100px 60px;
        grid-template-rows: auto;
        grid-auto-flow: row;
        border-width: 0px 1px 0px 0px;
      }
      .colspan-1-7 {
        grid-column: 1 / span 7;
      }
      .colspan-1-8 {
        grid-column: 1 / span 8;
      }
      .colspan-1-11 {
        grid-column: 1 / span 11;
      }
      .colspan-1-17 {
        grid-column: 1 / span 17;
      }
      .colspan-1-19 {
        grid-column: 1 / span 19;
      }
      .colspan-3-2 {
        grid-column: 3 / span 2;
      }
      .colspan-2-3 {
        grid-column: 2 / span 3;
      }
      .colspan-3-5 {
        grid-column: 3 / span 5;
      }
      .colspan-4-2 {
        grid-column: 4 / span 2;
      }
      .colspan-5-2 {
        grid-column: 5 / span 2;
      }
      .colspan-6-1 {
        grid-column: 6 / span 1;
      }
      .colspan-6-2 {
        grid-column: 6 / span 2;
      }
      .colspan-7-1 {
        grid-column: 7 / span 1;
      }
      .colspan-7-2 {
        grid-column: 7 / span 2;
      }
      .colspan-8-1 {
        grid-column: 8 / span 1;
      }
      .colspan-9-1 {
        grid-column: 9 / span 1;
      }
      .colspan-8-6 {
        grid-column: 8 / span 6;
      }
      .colspan-8-11 {
        grid-column: 8 / span 11;
      }
      .colspan-9-12 {
        grid-column: 9 / span 12;
      }
      .colspan-9-13 {
        grid-column: 9 / span 13;
      }
      .colspan-10-2 {
        grid-column: 10 / span 2;
      }
      .colspan-10-12 {
        grid-column: 10 / span 12;
      }
      .colspan-12-4 {
        grid-column: 12 / span 4;
      }
      .colspan-15-1 {
        grid-column: 15 / span 1;
      }
      .colspan-16-1 {
        grid-column: 16 / span 1;
      }
      .colspan-17-1 {
        grid-column: 17 / span 1;
      }
      .colspan-17-2 {
        grid-column: 17 / span 2;
      }
      .colspan-19-1 {
        grid-column: 19 / span 1;
      }
      .colspan-20-1 {
        grid-column: 20 / span 1;
      }
     .colspan-21-1 {
        grid-column: 21 / span 1;
      }
      .colspan-2-7 {
        grid-column: 2 / span 7;
      }
      .coldiv-1-2 {
        grid-row-start: 1;
        grid-row-end: span 2;
      }
      .coldiv-1-5 {
        grid-row-start: 1;
        grid-row-end: span 5;
      }
      .flex-col {
        padding: 12px 5px;
        border: 1px solid #d9d9d9;
        border-width: 0 0 1px 1px;
        white-space: nowrap;
        font-size: 12px;
      }
      .flex-col.pd {
        padding: 0 2px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .bgeee {
        background-color: #eee;
        text-align: center;
      }
      .flex-bg {
        background-color: #f1f4f3;
        text-align: center;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .box{
    border: 1px solid #d9d9d9;
    padding: 0 15px !important;
    height: 36px;
    line-height: 36px;
    text-align: left;
    border-radius: 4px;
    color: #333;
  }
  .box:empty:before{
    content: attr(placeholder);
    color: #c0c4cc;
    font-size: 12px;
  }
  .cursor{
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
  }
 /deep/ .el-textarea__inner{
    min-height: 36px !important;
    max-height: 61px !important;
    padding: 3px;
  }
 /deep/ .el-input--suffix .el-input__inner {
    padding-right: 0px;
    padding-left: 25px;
  }
 /deep/ input.el-input__inner {
   padding: 0px 3px;
 }
  #example1,#example2 {
    /deep/ .el-input--suffix .el-input__inner {
      padding-right: 0px;
      padding-left: 0px;
    }
  }

</style>
